﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>ZHI博客-时光轴</title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <!--Layui-->
    <link href="${path}/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="${path}/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="${path}/css/global.css" rel="stylesheet" />
    <link href="${path}/css/animate.min.css" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="${path}/css/timeline.css" rel="stylesheet" />
</head>
<body>
   <!-- 导航 -->
<nav id="h" class="blog-nav layui-header">
			<div class="blog-container">

		<a href="#" class="blog-user" onclick="login()"> 
					<i class="fa fa-qq"></i>
				</a>

				<a class="blog-logo" href="index.html">ZHI</a>

				<ul class="layui-nav" lay-filter="nav">
					<li class="layui-nav-item">
						<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/timeline/into"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
					</li>
					<span class="layui-nav-bar"></span></ul>

				<a class="blog-navicon" href="javascript:;">
					<i class="fa fa-navicon"></i>
				</a>
			</div>
		</nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <!-- 这个一般才是真正的主体内容 -->
         <input type="hidden"  id="path" value="">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="index.html" title="网站首页">网站首页</a>
                <a href="mixed_pic.html" title="点点滴滴">点点滴滴</a>
                <a><cite>时光轴</cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="child-nav shadow">
                    <span class="child-nav-btn child-nav-btn-this">时光轴</span>
                   <!--  <span class="child-nav-btn">笔记墙</span> -->
                </div>
                <div class="timeline-box shadow">
                    <div class="timeline-main">
                        <h1><i class="fa fa-clock-o"></i>时光轴<span> —— 记录生活点点滴滴</span></h1>
                        <div class="timeline-line"></div>
 						<!-- 时间轴 -->
 <c:forEach var="item" items="${list}">
 <div class="timeline-year">
      <h2>
        <a class="yearToggle" href="javascript:;">${item.key}</a>
        <i class="fa fa-caret-down fa-fw"></i>
      </h2>
      <c:forEach var="y" items="${item.value}">
      		<div class="timeline-month">
        <h3 class="animated fadeInLeft">
          <a class="monthToggle" href="javascript:;">${y.key}</a>
          <i class="fa fa-caret-down fa-fw"></i>
        </h3>
        <ul>
        <c:forEach var="d" items="${y.value}">
        	<li class="">
            <div class="h4 animated fadeInLeft">
              <p class="date">${d.key}</p>
            </div>
            <p class="dot-circle animated">
            <i class="fa fa-dot-circle-o"></i>
            </p>
            <div class="content animated fadeInRight">${d.value}</div>
            <div class="clear"></div>
          	</li>
        	
        </c:forEach>
          
    
        </ul>
      </div>
      </c:forEach>
      
    </div>
 </c:forEach>
 
      							
      					  <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>	
                        </div>
                      
                    </div>
                </div>
            </div>
        </div>
   
    <!-- 底部 -->
    <footer id="f" class="blog-footer">
<p><span>Copyright</span><span>©</span><span>2019</span><a href="${path}/index.jsp">ZHI博客</a><span>Design By ZHI TEAM</span></p>
<p><a href="http://www.miitbeian.gov.cn" target="_blank">小学期课题</a></p>
</footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
			<li class="layui-nav-item">
				<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/timeline/into"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
			</li>
			<span class="layui-nav-bar"></span>
		</ul>

    <!--分享窗体-->
    <div class="blog-share layui-hide">
        <div class="blog-share-body">
            <div style="width: 200px;height:100%;">
                <div class="bdsharebuttonbox">
                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div>
    
    <!--遮罩-->
    <div class="blog-mask animated layui-hide"></div>
	<!-- jquery -->
	<script src="${path}/js/jquery.min.js"></script>
    <!-- layui.js -->
    <script src="${path}/layui/layui.js"></script>
    <!-- 全局脚本 -->
    <script src="${path}/js/global.js"></script>
    <!-- 本页脚本 -->
    <script src="${path}/js/timeline.js"></script>

</body>
</html>